<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>


    <!-- All Vendor & plugins CSS include -->
    <link href="css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        form {
            margin-left: 470px;
            padding: 0;
            text-align: center;
        }
    </style>


</head>
<body>
<!-- Start Header Area -->
<header class="header-area">
    <!-- main header start -->
    <div class="main-header d-none d-lg-block">
        <!-- header top start -->
        <div class="header-top bdr-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="welcome-message">
                            <p>欢迎光临花语在线订花系统</p>
                        </div>
                    </div>
                    <div class="col-lg-6 text-right">
                        <div class="header-top-settings">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- header middle area start -->
        <div class="header-main-area sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- start logo area -->
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <h2> HUA YU </h2>
                            </a>
                        </div>
                    </div>
                    <!-- start logo area -->

                    <!-- main menu area start -->
                    <div class="col-lg-6 position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- main menu navbar start -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li><a href="index.html">主页</a></li>
                                        <li><a href="store.html">查看商家</a></li>
                                        <li><a href="shopping.html">查看购物车</a></li>
                                    </ul>
                                </nav>
                                <!-- main menu navbar end -->
                            </div>
                        </div>
                    </div>
                    <!-- main menu area end -->

                    <!-- mini cart area start -->
                    <div class="col-lg-3">
                        <div class="header-configure-wrapper">
                            <div class="header-configure-area">
                                <ul class="nav justify-content-end">
                                    <li class="user-hover">
                                        <a href="#" title="个人中心">
                                    <li><img src="{{result.store.simg}}" style="width: 60px" height="60px"></li>
                                    </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h4>退出</h4>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- mini cart area end -->

                </div>
            </div>
        </div>
        <!-- header middle area end -->
    </div>
    <!-- main header start -->
</header>
<!-- end Header Area -->

<!-- main wrapper start -->
<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area common-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h1>上传商品</h1>
                            <br>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->
</main>
<div class="container" id="container">
    <form class="form-inline" role="form" method="post" id="form1">
        <!--        <input type="hidden" id="sid" v-model="fid">-->
        <div class="form-group">
            <label for="fname">商品名称:</label>
            <input type="text" class="form-control" id="fname" name="fname" v-model="flower.fname">
            <br/><br/><br/>
            <label for="imgCover">商品图片:</label>
            <input type="file" class="form-control" id="imgCover" name="imgCover" accept="image/*"><br/>
            <img id="showCover">
            <br/><br/><br/>
            <label for="imgCovers">详情图片:</label>
            <input type="file" class="form-control" id="imgCovers" name="imgCovers" accept="image/*" multiple>
            <br/><br/><br/>
            <label for="price">商品单价:</label>
            <input type="text" class="form-control" id="price" name="price" v-model="flower.price">
            <br/><br/><br/>
            <label for="fmark">花语:</label>
            <input type="" class="form-control" id="fmark" name="fmark" v-model="flower.fmark">
            <br/><br/><br/>
            <label for="tid">种类:</label>
            <select id="tid" name="tid" v-model="flower.tid">
                <option value="0">春季</option>
                <option value="1">秋季</option>
            </select>
            <br/><br/>
            <input type="button" id="btn" class="btn btn-info" @click="addFlower()" value="确认上传商品">
        </div>
    </form>
</div>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/global.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    $(function () {
        $('#imgCover').change(function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#showCover').attr('src', e.target.result);
            }
            reader.readAsDataURL(file);
        })
    })
    var app = new Vue({
        el: '#container',
        data: {
            flower: {}
        },
        methods: {
            addFlower: function () {
                console.log(this.flower);

                var formData = new FormData($('#form1')[0]);

                var config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post(base_url + 'flower/add_flower.do', formData, config).then(function (res) {
                    if (res.data.code==200){
                    layer.msg(res.data.msg,{icon:1,time:500},function () {
                                location.href="store_count.html";
                    })
                    }else{

                        layer.msg(res.data.msg)
                    }
                })
            }
        }
    })

</script>
</html>